{% extends "base.html" %}

{% block content %}
<div style="max-width: 400px; margin: 2rem auto; padding: 2rem; background: rgba(255,255,255,0.1); border-radius: 1rem;">
    <h2>注册</h2>
    <form method="post" style="display: grid; gap: 1rem;">
        {% csrf_token %}
        <div>
            <label>用户名</label>
            {{ form.username }}
            <small style="font-size: 0.8rem; color: #ccc; display: block;">150个字符以内，仅包含字母、数字和@/./+/-/_</small>
            <small class="error-message" style="font-size: 0.8rem; color: #ff6b6b; display: none;"></small>
            
            <script>
            document.querySelector('input[name="username"]').addEventListener('input', function(e) {
                const errorMsg = document.querySelector('.error-message');
                const value = e.target.value;
                
                errorMsg.style.display = 'none';
                
                if(value.length > 150) {
                    errorMsg.textContent = "用户名不能超过150个字符";
                    errorMsg.style.display = 'block';
                    return;
                }
                
                if(!/^[a-zA-Z0-9@.+_-]+$/.test(value)) {
                    errorMsg.textContent = "只能包含字母、数字和@/./+/-/_";
                    errorMsg.style.display = 'block';
                    return;
                }
            });
            </script>
        </div>
        <div>
            <label>密码</label>
            {{ form.password1 }}
            <ul class="password-hints" style="font-size: 0.8rem; color: #ccc; margin-top: 0.5rem;">
                <li data-rule="length">至少8个字符</li>
                <li data-rule="numeric">不能是纯数字</li>
                <li data-rule="similar">不能与用户名太相似</li>
            </ul>
            
            <script>
            document.querySelector('input[name="password1"]').addEventListener('input', function(e) {
                const password = e.target.value;
                const username = document.querySelector('input[name="username"]').value;
                const hints = document.querySelectorAll('.password-hints li');
                
                hints.forEach(hint => {
                    hint.style.color = '#ccc';
                    hint.style.textDecoration = 'none';
                });
                
                if(password.length < 8) {
                    document.querySelector('[data-rule="length"]').style.color = '#ff6b6b';
                    document.querySelector('[data-rule="length"]').style.textDecoration = 'underline';
                }
                
                if(/^\d+$/.test(password)) {
                    document.querySelector('[data-rule="numeric"]').style.color = '#ff6b6b';
                    document.querySelector('[data-rule="numeric"]').style.textDecoration = 'underline';
                }
                
                if(username && password.toLowerCase().includes(username.toLowerCase())) {
                    document.querySelector('[data-rule="similar"]').style.color = '#ff6b6b';
                    document.querySelector('[data-rule="similar"]').style.textDecoration = 'underline';
                }
            });
            </script>
        </div>
        <div>
            <label>确认密码</label>
            {{ form.password2 }}
        </div>
        <button type="submit" style="background: var(--secondary); color: white; border: none; padding: 0.8rem; border-radius: 0.25rem; margin-top: 1rem;">注册</button>
    </form>
</div>
{% endblock %}